﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="text2.aspx.cs" Inherits="text2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title></title>

    <link href="Content/responsive-nav.css" rel="stylesheet" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
   
    <script src="Scripts/responsive-nav.min.js"></script>

    <style>
        #main {
            width:1550px;
            margin:0 auto;
        }
        #left {
            float:left;
            width:150px;
            background:#808080;
            height:100%;
            
        }
        #logo {
            width:200px;
            height:100px;
        }
        #right {
            float:left;
            width:75%;
            background:#ff0000;
            
        }
        #banner {
            float:right;
            width:100%;
            height:100px;
        }
        .LeftBar{
            display: block;
            height: auto;
            padding-bottom: 0;
            overflow: visible;
            width:120px;
            
        }
    </style>

     <script src="sd/jquery.js"></script>
    <script src="sd/jquery.MyFloatingBg.js"></script>


    <script >
        //$(document).ready(function () {
            //weather
            $("#demoDiv1").MyFloatingBg({ direction: -1 });

        //});
    </script>
</head>
<body>
    
    
    <div id="main">
        <div id="demoDiv1" bg="img/fw2.jpg" class="m" >
            
  <div id="left">
        <div id="logo">
            <img alt="UBOX" src="img/uboxiconR-03.png" />

        </div>

            <header class="navbar navbar-inverse navbar-fixed-top docs-nav" role="banner">
        <a class="navbar-brand" href="#" ><img src="img/uboxiconR-02.png" class="img-responsive logo-nav" alt="UBOX" /></a>
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
                    <span class="sr-only ">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand" ></a>
            </div>
            
                 
            <nav class="LeftBar" role="navigation">
                <div class="container">
                    <div class="row">
                        <div class="span2">
                            <ul class="nav nav-pills nav-stacked" role="tablist">
                                <li class="active"><a href="#">Home</a></li>
                                <li><a href="#">Tutorials</a></li>
                                <li><a href="#">Practice Editor </a></li>
                                <li><a href="#">Gallery</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>
            

            <nav class="collapse navbar-collapse bs-navbar-collapse " role="navigation">
                <ul class="nav navbar-nav">
                   
                    <li>
                       <a href="#"><span class="glyphicon glyphicon-tower">&nbsp員工管理</span></a>
                    </li>

                    <li>
                        <a href="#"><span class="glyphicon glyphicon-bullhorn">&nbsp公告管理</span></a>
                    </li>
                    <li>
                        <a href="#"><span class="glyphicon glyphicon-barcode">&nbsp商品管理</span></a>
                    </li>
                    <li>
                        <a href="#"><span class="glyphicon glyphicon-briefcase">&nbsp開箱文管理</span></a>
                    </li>
                    <li>
                        <a href="#"><span class="glyphicon glyphicon-user">&nbsp會員管理</span></a>
                    </li>
                    <li>
                        <a href="#"><span class="glyphicon glyphicon-comment">&nbsp留言管理</span></a>
                    </li>
                    <li>
                        <a href="#"><span class="glyphicon glyphicon-signal">&nbsp分析管理</span></a>
                    </li>

                </ul>
                <ul class="nav navbar-nav navbar-right">

                    <li>
                         <a href="#"><span class="glyphicon glyphicon-star">&nbsp關於</span></a>

                    </li>
                </ul>
            </nav>
        </div>
    </header>
     </div>   
    </div>
                
    <div id="right">
        <div id="banner">
            rt34t
        </div>
        
            <div id="content">
                4t34t4
            </div>
        
    </div>

    </div>

    <div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
    	<div class="modal-content">
      		<div class="modal-header login_modal_header">
        		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        		<h2 class="modal-title" id="myModalLabel">Login to Your Account</h2>
      		</div>
      		<div class="modal-body login-modal">
      			<p>Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required</p>
      			<br/>
      			<div class="clearfix"></div>
      			<div id='social-icons-conatainer'>
	        		<div class='modal-body-left'>
	        			<div class="form-group">
		              		<input type="text" id="username" placeholder="Enter your name" value="" class="form-control login-field">
		              		<i class="fa fa-user login-field-icon"></i>
		            	</div>
		
		            	<div class="form-group">
		            	  	<input type="password" id="login-pass" placeholder="Password" value="" class="form-control login-field">
		              		<i class="fa fa-lock login-field-icon"></i>
		            	</div>
		
		            	<a href="#" class="btn btn-success modal-login-btn">Login</a>
		            	<a href="#" class="login-link text-center">Lost your password?</a>
	        		</div>
	        	
	        		<div class='modal-body-right'>
	        			<div class="modal-social-icons">
	        				<a href='#' class="btn btn-default facebook"> <i class="fa fa-facebook modal-icons"></i> Sign In with Facebook </a>
	        				<a href='#' class="btn btn-default twitter"> <i class="fa fa-twitter modal-icons"></i> Sign In with Twitter </a>
	        				<a href='#' class="btn btn-default google"> <i class="fa fa-google-plus modal-icons"></i> Sign In with Google </a>
	        				<a href='#' class="btn btn-default linkedin"> <i class="fa fa-linkedin modal-icons"></i> Sign In with Linkedin </a>
	        			</div> 
	        		</div>	
	        		<div id='center-line'> OR </div>
	        	</div>																												
        		<div class="clearfix"></div>
        		
        		<div class="form-group modal-register-btn">
        			<button class="btn btn-default"> New User Please Register</button>
        		</div>
      		</div>
      		<div class="clearfix"></div>
      		<div class="modal-footer login_modal_footer">
      		</div>
    	</div>
  	</div>
</div>

     <script src="Scripts/jquery-2.1.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>
